<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="app">
    <div class="headerheader">
      <div class="headermast">
        <i></i>
        <h1 class="headh1">火山引擎---即梦AI---API调用示例---文生图</h1>
      </div>
      <div class="youbuten">
        <!-- <span><i class="iconfont icon-download"></i></span> -->
        <el-radio-group v-model="isCollapse">
          <span @click="isCollapse = !isCollapse" :label="isCollapse">
            <i class="iconfont icon-category"></i
          ></span>
        </el-radio-group>
      </div>
    </div>
    <div class="main">
      <Menu />
      <textarea
        v-model="inputMessage"
        placeholder="请输入消息"
        rows="3"
        @keyup.enter="sendMessage"
        @input="inputTextarea"
        @keydown="handleKeyDown"
      ></textarea>
      <el-button type="primary" @click="shengchengceshiApi"
        >生成测试API</el-button
      >
      <div>
        <el-table
          :data="addSuccessList"
          height="350"
          border
          style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column prop="ori_prompt" label="输入的内容" width="180">
          </el-table-column>
          <el-table-column prop="image_path" label="异物图片" align="center">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <img
                  :src="scope.row.image_path"
                  style="height: 650px; width: 1200px"
                />
                <img
                  slot="reference"
                  :src="scope.row.image_path"
                  style="max-height: 50px; max-width: 100px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="llm_result" label="文案润色">
          </el-table-column>
          <el-table-column prop="request_id" label="request_id">
          </el-table-column>
        </el-table>
      </div>
      <el-button type="primary" @click="chaxunceshiApi"
        >查询看图片url</el-button
      >
      <div v-if="image_tf" style="height: 170px">
        <span style="display: block; white-space: normal; word-wrap: break-word"
          >查询结果 ：{{ image_pathurl }}</span
        >
        <img :src="image_pathurl" style="height: 650px; width: 1200px" />
      </div>
    </div>

    <div class="footer">
      <div class="footerleft">
        <span>© 火山引擎---即梦AI---API调用示例</span>
      </div>
      <div>
        <span>© rtdl</span>
      </div>
    </div>
  </div>
</template>

<script>
import { postjimengVideoMake } from "@/api/kelingconfig";
import { backToTop } from "@/directives/back-to-top";
import Menu from "@/components/menu.vue";
export default {
  components: { Menu },
  directives: {
    backToTop,
  },
  data() {
    return {
      videoURL: "",
      isCollapse: true,
      videoCode: 0,
      addSuccessList: [],
      image_pathurl: "",
      image_tf: false,
      inputMessage: "",
      isDisabled: false,
      addFail: {
        task_id: new Date(),
        message: "失败",
        request_id: "0",
        time_elapsed: "0",
      },
    };
  },
  methods: {
    openNewPage() {
      if (this.videoURL) {
        window.open(this.videoURL);
      }
    },
    sendMessage() {
      if (this.inputMessage.trim()) {
        this.shengchengceshiApi();
        this.inputMessage = "";
      }
    },
    inputTextarea(val) {
      console.log(val.target.value, "val", this.inputMessage);
      if (this.inputMessage.length >= 1) {
        this.isDisabled = false;
      }
    },
    handleKeyDown(event) {
      if (event.key === "Enter" && this.inputMessage.trim() === "") {
        event.preventDefault();
        this.$refs.tooltipRef.show();
      }
    },
    shengchengceshiApi() {
      let pamas = {
        req_key: "jimeng_high_aes_general_v21_L",
        prompt: this.inputMessage,
        return_url: true,
      };
      postjimengVideoMake("CVProcess", "2022-08-31", pamas)
        .then((res) => {
          console.log(res);
          let listd = {
            ori_prompt: res.data.infer_ctx.params.ori_prompt, //输入的内容
            image_path: res.data.image_urls[0], //异物图片
            llm_result: res.data.llm_result, //文案润色
            time_elapsed: res.time_elapsed,
            request_id: res.request_id,
          };
          this.addSuccessList.push(listd);
        })
        .catch((err) => {
          console.log(err, "rrrrrrr");
          this.addSuccessList.push(this.addFail);
        });
    },
    handleCurrentChange(val) {
      console.log(val, "asdada");
      this.image_pathurl = val.image_path;
      this.chaxunceshiApi();
    },
    chaxunceshiApi() {
      if (this.image_pathurl) {
        this.image_tf = true;
      }
    },
    onVideoLoaded() {
      console.log("视频加载成功");
      // 可以在这里尝试播放视频
      this.$refs.video1.play().catch((error) => {
        console.error("播放失败:", error);
      });
    },

    onVideoError() {
      const videoElement = this.$refs.video1;
      console.error("视频加载错误:", videoElement.error);
      // 显示友好的错误信息
      this.showVideoError = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/styles/jimengceshi.scss";

</style>